﻿@model IEnumerable<FileManager.Models.FileModel>
@{
    ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/ekko-lightbox.min.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Scripts/dropzone/basic.min.css" rel="stylesheet" />
<link href="~/Scripts/dropzone/dropzone.min.css" rel="stylesheet" />
<link href="~/Content/MyStyle.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/ekko-lightbox.min.js"></script>
<script src="~/Scripts/dropzone/dropzone.min.js"></script>






<a href="#" onclick="onDbClick('@ViewBag.ParentPath')" class="btn btn-info">返回上一级</a>
<a href="#" onclick="onUploadClick()" class="btn btn-primary">上传</a>

<!--上传-->
<div class="dropzone uploader" id="uploader">
    <a href="#" onclick="onCloseUploadClick()" class="btn btn-primary" style="text-align:center">返回</a>
</div>

<!--资源-->
<div class="container">
    @foreach (FileManager.Models.FileModel item in Model)
    {
        if (item.Type == "dir")
        {
            <div class="item" onclick="onClick();" ondblclick="onDbClick('@item.Path');">
                <i class="fa fa-folder" aria-hidden="true"  style="font-size:40px;color:burlywood"></i>
                <p>@item.Name</p>
            </div>
        }
        else if(item.Type.ToLower() == ".png")
        {
            <div class="item">
                <a href="@item.Path" data-toggle="lightbox" data-title="@item.Name">
                    <img class="item-img img-fluid" src="@item.Path" />
                </a>
                <p>@item.Name</p>
            </div>
        }
        else if (item.Type.ToLower() == ".mp4")
        {
            <div class="item">
                <a href="@item.Path" data-toggle="lightbox" data-gallery="youtubevideos" data-title="@item.Name">
                    <video controls="controls" class="item-img img-fluid">
                        <source src="@item.Path" type="video/mp4" />
                    </video>
                </a>
                <p>@item.Name</p>
            </div>
        }
        else
        {
            <div class="item">
                <a href="@item.Path" data-toggle="lightbox" data-title="@item.Name">
                    <img class="item-img img-fluid" src="@item.Path" />
                </a>
                <p>@item.Name</p>
            </div>
        }
    }
</div>

<script>
    var time = null;
    function onDbClick(Path) {
        clearTimeout(time);
        window.location.href = "/Home/Index?currPath=" + Path;
    }

    $(".container div").on('click', function () {
        clearTimeout(time);  //首先清除计时器
        time = setTimeout(() => {
            console.log('click');

            if ($(this).hasClass('item')) {
                $(this).removeClass('item');
                $(this).addClass('item-selected');
            }
            else if ($(this).hasClass('item-selected')) {
                $(this).removeClass('item-selected');
                $(this).addClass('item');
            }

            //切换图标
            if ($(this).children('i').hasClass('fa fa-folder')) {
                $(this).children('i').removeClass('fa fa-folder');
                $(this).children('i').addClass('fa fa-folder-open');
            }
            else if ($(this).children('i').hasClass('fa fa-folder-open')) {
                $(this).children('i').removeClass('fa fa-folder-open');
                $(this).children('i').addClass('fa fa-folder');
            }
        }, 300);
    });

    function onUploadClick() {
        $('#uploader').show(500);
    }
    function onCloseUploadClick() {
        $('#uploader').hide(500);
    }

    $(document).on('click', '[data-toggle="lightbox"]', function (event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });

    var myDropzone = new Dropzone("#uploader", {
        url: "/Home/Upload", // 文件提交地址
        method: "post",  // 也可用put
        paramName: "file", // 默认为file
        maxFiles: 1,// 一次性上传的文件数量上限
        maxFilesize: 2, // 文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
        addRemoveLinks: true,
        parallelUploads: 1,// 一次上传的文件数量
        //previewsContainer:"#preview", // 上传图片的预览窗口
        dictDefaultMessage: '拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传1个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init: function () {
            this.on("addedfile", function (file) {
                // 上传文件时触发的事件
            });
            this.on("success", function (file, data) {
                // 上传成功触发的事件
            });
            this.on("error", function (file, data) {
                // 上传失败触发的事件
            });
            this.on("removedfile", function (file) {
                // 删除文件时触发的方法
            });
        }
    });
</script>
